<!DOCTYPE HTML>
<html>
<head>
<title>demo</title>
<embed src="/static/mp3/愿你.mp3" autostart="true" loop="true" hidden="true"></embed>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- start js -->
<script src="/static/js/modernizr.custom.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
		});
	});
	</script>
<!-- start top_js_button -->
<script type="text/javascript" src="/static/js/move-top.js"></script>
<script type="text/javascript" src="/static/js/easing.js"></script>
   <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
<!-- Add fancyBox main JS and CSS files -->
<script src="/static/js/jquery.magnific-popup.js" type="text/javascript"></script>
<link href="/static/css/magnific-popup.css" rel="stylesheet" type="text/css">
		<script>
			$(document).ready(function() {
				$('.popup-with-zoom-anim').magnificPopup({
					type: 'inline',
					fixedContentPos: false,
					fixedBgPos: true,
					overflowY: 'auto',
					closeBtnInside: true,
					preloader: false,
					midClick: true,
					removalDelay: 300,
					mainClass: 'my-mfp-zoom-in'
			});
		});
		</script>
</head>
<body>
<!-- start header -->
<div class="header_bg">
<div class="wrap">
	<div class="header">
		<div class="logo">
			<h1><a href="index.html"><img src="/static/images/logo.png" alt=""/></a></h1>
		</div>
		<div class="menu">
			<ul>
				<li><a href="#home" class="scroll">Home</a></li>
				<li><a href="#about" class="scroll">About</a></li>
				<li><a href="#work" class="scroll">Work</a></li>
				<li><a href="#service" class="scroll">Services</a></li>
				<li><a href="#contact" class="scroll">Contact</a></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
</div>
</div>
<!-- start slider -->
<div class="slider_bg">
<div class="wrap">
	<div class="slider" id="home">
		<div class="slider_text">
			<h2>we are bloom</h2>
			<h3>We do digital & we do it with a difference</h3>
		</div>
</div>
</div>
</div>
<!-- start main -->
<div class="main_bg">
<div class="wrap">
	<div class="main" id="about">
		<div class="main_text">
			<h2>the bloom story </h2>
			<h3>some things you should know about us</h3>
		</div>	
		<div class="content_bg">
			<div class="main_pic">
				<a class="btn" href="#" > from humble beginnings </a>
			</div>
		</div>	
		<!-- start tabs_style -->
		<section class="tabs">
	            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
		        <label for="tab-1" class="tab-label-1">history</label>
		
	            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
		        <label for="tab-2" class="tab-label-2">awards</label>
		
	            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
		        <label for="tab-3" class="tab-label-3">philosophy</label>
          
			    <div class="clear-shadow"></div>
		        <div class="content_tab">
			        <div class="content-1">
			        	<a class="tab_left">
				        	<h2>01. history</h2>
							<h3>a bit about our past</h3>
						</a>
						<a  class="tab_right">
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
							<p class="top hide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
						</a>
						<div class="clear"></div>
					</div>
			        <div class="content-2">
			        	<a class="tab_left">
				        	<h2>02. awards</h2>
							<h3>a bit about our awards</h3>
						</a>
						<a  class="tab_right">
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
							<p class="top hide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
						</a>
						<div class="clear"></div>
					</div>
			        <div class="content-3">
			        	<a class="tab_left">
				        	<h2>03. philosophy</h2>
							<h3>a bit our philosophy</h3>
						</a>
						<a  class="tab_right">
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
							<p class="top hide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
						</a>
						<div class="clear"></div>
                    </div>
		        </div>
		 </section>
		 <!-- end tabs_style -->
		 <div class="clear"></div>
	</div>
</div>
</div>
<!-- start work-page -->
<div class="work_bg">
<div class="wrap">
	<div class="work" id="work">
		<div class="main_text1">
			<h2>our latest work </h2>
			<h3>some projects we've worked on of late</h3>
		</div>		
		<!-- start grids_of_2 -->
		<div class="grids_of_2">
			<div class="grid_1_of_2">
				<div class="grid_pic">
					<img src="/static/images/pic1.jpg" alt=""/>
				</div>
				<div class="grid_text">
					<h2>runner</h2>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
				</div>
			</div>
			<div class="grid_1_of_2">
				<div class="grid_pic">
					<img src="/static/images/pic2.jpg" alt=""/>
				</div>
				<div class="grid_text">
					<h2>velo</h2>
					<p>There are many variations of passages of Lorem Ipsum but the majority have suffered  in some form, by injected humour, or randomised words which don't  when an unknown printer took look even slightly believable. </p>
				</div>
			</div>
			<div class="clear"></div>
		</div>	
		<div class="grids_of_2">
			<div class="grid_1_of_2">
				<div class="grid_pic">
					<img src="/static/images/pic3.jpg" alt=""/>
				</div>
				<div class="grid_text">
					<h2>harriers</h2>
					<p>There are many variations of passages of Lorem Ipsum but the majority have suffered  in some form, by injected humour, or randomised words which don't  when an unknown printer took look even slightly believable. </p>
				</div>
			</div>
			<div class="grid_1_of_2">
				<div class="grid_pic">
					<img src="/static/images/pic4.jpg" alt=""/>
				</div>
				<div class="grid_text">
					<h2>striders</h2>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
				</div>
			</div>
			<div class="clear"></div>
		</div>	
		<!-- end grids_of_2 -->
		<div class="wrk_btn">
			<a class="popup-with-zoom-anim" href="#small-dialog">view more projects</a>
		</div>
		<!---start-mfp ---->	
			<div id="small-dialog" class="mfp-hide">
				<div class="pop_up">
					<h2>project description</h2>
					<p class="para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
					<div class="social-icons">
				   		<h3>get in touch</h3>
				     <ul>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
					</ul>
					<div class="clear"></div>
					</div>
				</div>
			</div>
			<!---end-mfp ---->	
	</div>
</div>
</div>
<!-- start service-page -->
<div class="service_bg">
<div class="wrap">
	<div class="service" id="service">
		<div class="main_text1">
			<h2>happy clients </h2>
			<h3>some kind words from our clients </h3>
		</div>	
		<div class="service_main">
			<div class="service_pic">
				<img src="/static/images/ser_pic.png" alt=""/>
			</div>
			<div class="service_list">
				<p>"The standard chunk of Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."</p>
				<h3>albert camus</h3>
			</div>
		</div>
	</div>
</div>
</div>
<!-- start contact-page -->
<div class="contact_bg">
<div class="wrap">
	<div class="contact" id="contact">
		<div class="main_text1">
			<h2>get in touch </h2>
			<h3>fill in the form & we'll be in touch </h3>
		</div>		
		<div class="span_of_2">
			<div class="span_1_of_2">
				<div class="contact-form">
				<form method="post" action="contact-post.html">
					    	<div>
						    	<span><label>name</label></span>
						    	<span><input name="userName" type="text" class="textbox"></span>
						    	<div class="clear"></div>
						    </div>
						    <div>
						    	<span><label>e-mail</label></span>
						    	<span><input name="userEmail" type="text" class="textbox"></span>
						    	<div class="clear"></div>
						    </div>
						    <div>
						     	<span><label>mobile</label></span>
						    	<span><input name="userPhone" type="text" class="textbox"></span>
						    	<div class="clear"></div>
						    </div>
						    <div>
						    	<span><label>subject</label></span>
						    	<span><textarea name="userMsg"> </textarea></span>
						    	<div class="clear"></div>
						    </div>
						   <div>
						   		<span><input type="submit" class="" value="Send"></span>
						  </div>	
				  </form>
				</div>
			</div>
			<div class="span_1_of_2">
				<div class="address">
					<div class="span_1_of_2_pic">
						<img src="/static/images/icon1.png" alt=""/>
					</div>
					<div class="span_1_of_2_text">
						<p>The Lorem Ipsum Dolor Sit,</p>
						<p>22-56-2-9 Sit Amet,</p>
						<p>the perspiciatis,</p>
						<p>USA</p>
					</div>
					<div class="clear"></div>
				</div>
				<div class="address">
					<div class="span_1_of_2_pic">
						<img src="/static/images/icon2.png" alt=""/>
					</div>
					<div class="span_1_of_2_text">
						<h3><a href="mailto:info@mycompany.com">info(at)mycompany.com </a></h3>
					</div>
					<div class="clear"></div>
				</div>
				<div class="address">
					<div class="span_1_of_2_pic">
						<img src="/static/images/icon3.png" alt=""/>
					</div>
					<div class="span_1_of_2_text">
						<h4>01234 444 777</h4>
					</div>
					<div class="clear"></div>
				</div>
				   <div class="social-icons">
				   		<h3>find us here</h3>
				     <ul>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
				        <li><a href="#" target="_blank"></a></li>
					</ul>
					</div>
			</div>
			<div class="clear"></div>
		</div>	
	</div>
</div>
</div>
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
	<div class="footer">
		<!-- scroll_top_btn -->
	    <script type="text/javascript">
			$(document).ready(function() {
			
				var defaults = {
		  			containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
		 		};
				
				
				$().UItoTop({ easingType: 'easeOutQuart' });
				
			});
		</script>
		 <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
		<!--end scroll_top_btn -->
		<div class="footer_nav">
		<ul>
				<li><a href="#me">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Work</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
		</ul>
		</div>
		<div class="logo1">
			<h1><a href="index.html"><img src="/static/images/logo1.png" alt=""/></a></h1>
		</div>
		<div class="copy">
			<p class="link"><span>Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://www.777moban.com/">777模板</a></span></p>
		</div>
		<div class="clear"></div>
	</div>
</div>
</div>
</div>

</body>
</html>